<template>
  <el-dialog
    class="nodeDialog custom-dialog"
    v-model="dialogVisible"
    width="600"
    :show-close='false'
    modal-class="dialog-center"
  >
    <div class="custom-dialog-header">
      <div class="title-box">
          <div class="title">{{$t('message.text.hyperLink')}}</div>
      </div>
      <svg class="close-icon" @click="cancel">
          <use xlink:href="#keowledge-danchuangguanbi1"></use>
      </svg>
    </div>
    <div class="link-body">
      <div class="item">
        <span class="name">{{$t('message.text.link')}}</span>
        <el-input
          v-model="link"
          size="mini"
          placeholder="http://xxxx.com/"
          @blur="handleUrl"
        >
          <template #prepend>
            <el-select v-model="protocol" style="width: 80px;">
              <el-option label="https" value="https"></el-option>
              <el-option label="http" value="http"></el-option>
              <el-option label="无" value="none"></el-option>
            </el-select>
          </template>
        </el-input>
      </div>
      <div class="item">
        <span class="name">{{$t('message.table.name')}}</span>
        <el-input v-model="linkTitle" size="mini"></el-input>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{$t('message.buttons.cancal')}}</el-button>
        <el-button type="primary" @click="confirm">{{$t('message.buttons.submit')}}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  
})

const dialogVisible = ref(false)
const link = ref("")
const linkTitle = ref("")
const protocol = ref('https')
const activeNodes = ref([])

onMounted(()=>{
  proxy.$eventBus.$on("node_active", handleNodeActive);
  proxy.$eventBus.$on("showNodeLink", handleShowNodeLink);
})
onBeforeUnmount(()=>{
  proxy.$eventBus.$off('node_active', handleNodeActive)
  proxy.$eventBus.$off('showNodeLink', handleShowNodeLink)
})

function handleShowNodeLink() {
  activeNodes.value[0].mindMap.keyCommand.pause();
  proxy.$eventBus.$emit('startTextEdit');
  dialogVisible.value = true;
}
function handleNodeActive(...args) {
  activeNodes.value = [...args[1]]
  if (activeNodes.value.length > 0) {
    let firstNode = activeNodes.value[0]
    link.value = firstNode.getData('hyperlink') || ''
    handleUrl(true)
    link.valueTitle = firstNode.getData('hyperlinkTitle') || ''
  } else {
    link.value = ''
    link.valueTitle = ''
  }
}
function cancel() {
  dialogVisible.value = false;
  activeNodes.value[0].mindMap.keyCommand.recovery();
  proxy.$eventBus.$emit('endTextEdit');
}
function removeProtocol(url) {
  return url.replace(/^https?:\/\//, '')
}
function handleUrl(setProtocolNoneIfNotExist) {
  const res = link.value.match(/^(https?):\/\//)
  if (res && res[1]) {
    protocol.value = res[1]
  } else if (!link.value) {
    protocol.value = 'https'
  } else if (setProtocolNoneIfNotExist) {
    protocol.value = 'none'
  }
  removeProtocol(link.value)
}
function confirm() {
  activeNodes.value.forEach((node) => {
    node.setHyperlink(link.value, link.valueTitle);
    cancel();
  });
}
</script>
<style lang="scss" scoped>
.nodeDialog {
  @include fontFamily;
  .link-body{
    padding: 20px 30px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .name {
      display: block;
      width: 50px;
    }
  }
}
</style>